<template>
  <div :id="'a' + index" class="MyHandoverItem">
    <div class="title">
      <h1>{{ data.taskName }}</h1>
      <p>库区：{{ data.storageArea }}</p>
    </div>
    <div class="myShipmentItemCon">
      <van-row>
        <van-col span="24">
          <div class="myShipmentItemConItem">
            <h1>主&nbsp; 单&nbsp;号：</h1>
            <p>
              {{ data.masterWaybill }}
              <span
                v-if="data.damageInfos.toString() != []"
                @click="changeDamageDetailsEdit(data.damageInfos[0].id)"
                >破/{{ data.damageInfos | changeDamageInfos }}</span
              >
            </p>
          </div></van-col
        >
        <van-col span="24">
          <div class="myShipmentItemConItem">
            <h1>主单件重：</h1>
            <p>{{ data.waybill.masterWaybillNum }}pcs/{{ data.waybill.masterWaybillGrossWeight }}kg</p>
          </div>
        </van-col>
        <van-col span="12">
          <div class="myShipmentItemConItem">
            <h1>应发件数：</h1>
            <p>{{ data.consigneeNum }}pcs</p>
          </div>
        </van-col>
        <van-col span="12">
          <div class="myShipmentItemConItem">
            <h1>实发件数：</h1>
            <van-stepper
              class="Stepper"
              theme="round"
              :default-value="0"
              button-size="22"
              integer
              :min="0"
              disable-input
              :disabled="
                isEdit ||
                  (data.subDeliverCargoWaybills &&
                    data.subDeliverCargoWaybills.length > 0)
              "
              v-model="data.actualHandoverNum"
            />
          </div>
        </van-col>

        <van-col span="18">
          <div class="myShipmentItemConItem">
            <h1>货物类型：</h1>
            <p>{{ data.cargoType }}</p>
          </div>
        </van-col>
        <van-col span="6" v-if="data.loadingService == 1">
          <div class="myShipmentItemConItem">
            <span class="need">* 需装车</span>
          </div>
        </van-col>
        <van-col span="24">
          <div class="myShipmentItemConItem">
            <h1>货&nbsp; &nbsp; &nbsp; &nbsp; 位：</h1>
            <p>{{ data.storageCargoLocation }}</p>
          </div>
        </van-col>
        <van-col span="24">
          <div class="myShipmentItemConItem">
            <h1>特&nbsp; 货&nbsp;码：</h1>
            <p>{{ data.specialCode }}</p>
          </div>
        </van-col>
      </van-row>
    </div>
    <div v-if="data.subDeliverCargoWaybills">
      <div
        class="myShipmentItemConChildren"
        v-for="(item, index1) in data.subDeliverCargoWaybills"
        :key="index1"
      >
        <div :id="'a' + index + index1" class="title">
          <h1>{{ item.taskName }}</h1>
          <p>库区：{{ item.storageArea }}</p>
        </div>
        <div>
          <van-row>
            <van-col span="24">
              <div class="myShipmentItemConItem">
                <h1>分&nbsp; 单 &nbsp;号：</h1>
                <p>
                  {{ item.subWaybill }}
                  <span
                    v-if="item.damageInfos.toString() != []"
                    @click="changeDamageDetailsEdit(item.damageInfos[0].id)"
                    >破/{{ item.damageInfos | changeDamageInfos }}</span
                  >
                </p>
              </div>
            </van-col>
            <van-col span="24">
              <div class="myShipmentItemConItem">
                <h1>分单件重：</h1>
                <p>{{ item.consigneeNum }}pcs/{{ item.consigneeWeight }}kg</p>
              </div>
            </van-col>
            <van-col span="12">
              <div class="myShipmentItemConItem">
                <h1>应发件数：</h1>
                <p>{{ item.consigneeNum }}pcs</p>
              </div>
            </van-col>
            <van-col span="12">
              <div class="myShipmentItemConItem">
                <h1>实发件数：</h1>
                <van-stepper
                  class="Stepper"
                  :default-value="0"
                  button-size="22"
                  integer
                  :min="0"
                  disable-input
                  :disabled="isEdit"
                  v-model="item.actualHandoverNum"
                  theme="round"
                  @plus="
                    changeValue({
                      masterWaybill: data.masterWaybill,
                      subWaybill: item.subWaybill,
                      type: '+',
                    })
                  "
                  @minus="
                    changeValue({
                      masterWaybill: data.masterWaybill,
                      subWaybill: item.subWaybill,
                      type: '-',
                    })
                  "
                />
              </div>
            </van-col>
            <van-col span="24">
              <div class="myShipmentItemConItem">
                <h1>货&nbsp; &nbsp; &nbsp; &nbsp; 位：</h1>
                <p>{{ item.storageCargoLocation }}</p>
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Col, Row, Stepper } from "vant";

Vue.use(Stepper);
Vue.use(Col);
Vue.use(Row);
export default {
  props: ["data", "isEdit", "index"],
  methods: {
    // 父组件获取详情
    changeDamageDetailsEdit(e) {
      this.$emit("changeDamageDetailsEdit", e);
    },
    // 手动加减
    changeValue(e) {
      this.$emit("changeValue", e);
    },
  },
  filters: {
    changeDamageInfos(e) {
      let num = 0;
      if (e && e.length > 0) {
        e.map((item) => {
          num += item.damageNum;
        });
      }
      return num;
    },
  },
};
</script>

<style lang="scss" scoped>
.MyHandoverItem {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;

  .title {
    width: 100%;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px dotted #b4b7c9;

    & > h1 {
      display: inline;
      font-size: 12px;
      font-weight: 500;
      color: #ffffff;
      line-height: 20px;
      padding: 0 3px;
      background-color: #3a535b;
    }

    & > p {
      font-weight: 400;
      background-color: rgba(153, 153, 153, 0.1);
      font-size: 14px;
      font-weight: 400;
      color: #8c9ba5;
      line-height: 20px;
      padding: 0 3px;
    }
  }

  .myShipmentItemCon {
    width: 100%;
    padding-top: 15px;
    box-sizing: border-box;

    .myShipmentItemConItem {
      width: 100%;
      display: flex;

      & > h1 {
        width: 85px;
        font-size: 16px;
        font-weight: 400;
        color: #999999;
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      & > p {
        flex: 1;
        font-size: 16px;
        font-weight: 400;
        color: #333;
        line-height: 30px;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
        span {
          color: #d91010;
        }
      }
      .need {
        margin-top: 5px;
        margin-left: 15px;
        padding: 1px 5px;
        background-color: rgba(218, 27, 27, 0.3);
        color: #d91010ff;
      }
    }
  }

  .myShipmentItemConChildren {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #eaedf0;
    margin-bottom: 10px;

    .myShipmentItemConItem {
      width: 100%;
      display: flex;
      white-space: nowrap;

      & > h1 {
        width: 85px;
        font-size: 16px;
        font-weight: 400;
        color: #999999;
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        //text-overflow: ellipsis;
      }

      & > p {
        flex: 1;
        font-size: 16px;
        font-weight: 400;
        color: #333;
        line-height: 30px;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
      }
    }
  }

  .Stepper {
    padding: 4px 0;
    box-sizing: border-box;
    /deep/.van-stepper__plus {
      color: #999999 !important;
      background-color: #fff !important;
      border: 2px solid #999999 !important;
    }
    /deep/.van-stepper__minus {
      color: #fff;
      background-color: #f29d12;
      border: 2px solid #f29d12;
    }
    /deep/.van-stepper__input {
      width: 30px;
    }
  }
}
</style>
